<template>
	<div style="padding-top: 80px">
		<div class="loading" v-if="loading">
			<van-loading size="24px">加载中...</van-loading>
		</div>
		<van-form class="form-login" @submit="onSubmit">
			<h3>登录</h3>
			<h2>手机号码</h2>
			<van-field clearable v-model="phone" placeholder="请输入手机号" type="tel" :rules="[{ required: true, message: '请填写手机号' }]" />
			<h2>手机验证码</h2>
			<van-field v-model="code" center clearable type="digit" placeholder="请输入短信验证码" :rules="[{ required: true, message: '请填写手机号短信验证码' }]">
				<template #button>
					<van-button size="small" type="primary">{{ text }}</van-button>
				</template>
			</van-field>
			<div style="margin-top: 32px">
				<van-button round block type="info" native-type="submit">登录 / 注册</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
import { Toast } from "vant";
import { post } from "@/api/post";
import { getQueryString } from "@/utils/queryString";
import { setToken } from "@/utils/auth";

export default {
	data() {
		return {
			phone: "",
			code: "",
			checked: true,
			text: "获取验证码",
			link: getQueryString("link"),
			loading: false,
			grade_list: [],
			grade_id: "",
		};
	},
	mounted() {},
	methods: {
		onSubmit() {
			if (this.phone.length != 11) {
				return Toast.fail("请输入正确的手机号");
			}

			post({
				requestType: "LOGIN",
				phone: this.phone,
				code: this.code,
			})
				.then((res) => {
					if (res.code == 200) {
						this.login(res.obj);
					} else if (res.code == 401) {
						Toast.fail("验证码错误");
					} else {
						Toast.fail("参数验证错误");
					}
				})
				.catch((res) => {
					console.log(res);
					Toast.fail("返回参数错误");
				});
		},
		sendCode() {
			let phone = this.phone.replace(/\s*/g, "");
			if (this.text != "获取验证码") {
				return;
			}

			post({
				requestType: "VERIFY_CODE_SEND",
				phone: phone,
			})
				.then((res) => {
					if (res.code == 200) {
						this.timeOut();
					} else {
						Toast.fail("参数验证错误");
					}
				})
				.catch(() => {
					Toast.fail("返回参数错误");
				});
		},
		timeOut() {
			this.text = 60;
			let codeData = setInterval(() => {
				if (this.text > 0) {
					this.text = this.text - 1;
				} else {
					this.text = "获取验证码";
					clearInterval(codeData);
				}
			}, 1000);
		},
		login(userInfo) {
			setToken(userInfo.token);
			if (!this.link) {
				this.$router.push("/course");
			} else {
				this.$router.push(`/${this.link}`);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
h3 {
	width: 100%;
	text-align: left;
}

h2 {
	margin: 0;
	padding: 32px 0 10px 0;
	color: rgb(31, 31, 33);
	font-weight: normal;
	font-size: 14px;
	line-height: 16px;
}

.form-login {
	padding: 0 16px;
}

.van-field {
	background-color: #f7f8fa;
	padding: 16px 0;
	border-bottom: 1px solid #d0cfcf;
}

.text {
	margin: 15px auto 0 auto;
	width: 60%;
	font-size: 12px;
	display: flex;
	&-doc {
		text-align: center;
		a {
			color: #2171e8;
		}
	}
}

.check-box {
	display: inline-block;
	flex-shrink: 0;
	margin-right: 5px;
}

.loading {
	top: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 8;
}

.select-grade {
	top: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 5;
}
</style>
